﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}


<!DOCTYPE html>
<html>
<head>
    <title>基础菜单 - Layui</title>
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <style>
        /* 默认隐藏所有菜单组的子菜单 */
        .layui-menu-item-group > ul {
            display: none;
        }
        /* 当菜单组展开时显示子菜单 */
        .layui-menu-item-group.layui-menu-item-down > ul {
            display: block;
        }

        /* 一级菜单项样式优化 */
        .layui-menu-item-group > .layui-menu-body-title {
            color: #333 !important;
            font-weight: 500;
            transition: all 0.3s ease;
        }

            /* 一级菜单悬停效果 */
            .layui-menu-item-group > .layui-menu-body-title:hover {
                color: #667eea !important;
                background-color: rgba(102, 126, 234, 0.08);
                border-radius: 6px;
                margin: 2px 8px;
            }

        /* 二级菜单项样式 */
        .layui-menu-item-group > ul > li .layui-menu-body-title {
            color: #555 !important;
            transition: all 0.3s ease;
            border-radius: 4px;
            margin: 1px 8px;
            text-decoration: none;
            display: block;
            padding: 8px 15px;
        }

        /* 首页菜单特殊样式，增强点击响应 */
        li[lay-options] .layui-menu-body-title {
            display: block;
            padding: 10px 15px;
            margin: 2px 8px;
            border-radius: 6px;
            transition: all 0.3s ease;
            cursor: pointer;
            user-select: none;
        }

        li[lay-options] .layui-menu-body-title:hover {
            background-color: rgba(102, 126, 234, 0.08);
            transform: translateX(2px);
        }

        li[lay-options].layui-menu-item-checked .layui-menu-body-title {
            background-color: rgba(102, 126, 234, 0.15);
            font-weight: 600;
        }

            /* 二级菜单悬停效果 */
            .layui-menu-item-group > ul > li .layui-menu-body-title:hover {
                color: #667eea !important;
                background-color: rgba(102, 126, 234, 0.08);
                transform: translateX(3px);
            }

        /* 三级菜单项样式 */
        .layui-menu-item-group ul .layui-menu-item-group > .layui-menu-body-title {
            color: #555 !important;
            font-weight: 500;
        }

            /* 三级菜单悬停效果 */
            .layui-menu-item-group ul .layui-menu-item-group > .layui-menu-body-title:hover {
                color: #667eea !important;
                background-color: rgba(102, 126, 234, 0.08);
            }

        /* 四级菜单项样式 */
        .layui-menu-item-group ul .layui-menu-item-group ul li .layui-menu-body-title {
            color: #666 !important;
        }

            /* 四级菜单悬停效果 */
            .layui-menu-item-group ul .layui-menu-item-group ul li .layui-menu-body-title:hover {
                color: #667eea !important;
                background-color: rgba(102, 126, 234, 0.08);
            }

        /* 选中状态优化 */
        .layui-menu-item-checked .layui-menu-body-title {
            color: #667eea !important;
            font-weight: 600;
        }

        /* 箭头图标优化 */
        .layui-menu-body-title i {
            color: #666;
            transition: color 0.3s ease;
        }

        .layui-menu-body-title:hover i {
            color: #667eea;
        }

        /* 选中状态的箭头 */
        .layui-menu-item-checked .layui-menu-body-title i {
            color: #667eea;
        }

        /* 布局样式 */
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
        }

        .main-container {
            display: flex;
            height: 100vh;
        }

        /* 左侧菜单区域 */
        .sidebar {
            width: 280px;
            background: #f8f9fa;
            border-right: 1px solid #e9ecef;
            overflow-y: auto;
            flex-shrink: 0;
        }

            .sidebar .layui-panel {
                width: 100%;
                margin: 8px;
                height: calc(100vh - 16px);
            }

        /* 右侧内容区域 */
        .content-area {
            flex: 1;
            background: #fff;
            display: flex;
            flex-direction: column;
        }



        /* 内容主体 */
        .content-main {
            flex: 1;
            overflow: hidden;
        }

            .content-main iframe {
                width: 100%;
                height: 100%;
                border: none;
            }

        /* 隐藏iframe内部页面的标题，只保留菜单系统的统一标题 */
        .content-main iframe {
            /* 由于跨域限制，无法直接通过CSS隐藏iframe内部元素 */
            /* 需要在各个页面内部添加隐藏标题的样式 */
        }

        /* 默认欢迎页面 */
        .welcome-page {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            flex-direction: column;
            color: #666;
        }

            .welcome-page .icon {
                font-size: 64px;
                margin-bottom: 20px;
                color: #667eea;
            }

            .welcome-page h3 {
                margin: 0 0 10px 0;
                font-size: 24px;
                color: #333;
            }

            .welcome-page p {
                margin: 0;
                font-size: 16px;
            }
    </style>

</head>
<body>
    <div class="main-container">
        <!-- 左侧菜单 -->
        <div class="sidebar">
            <div class="layui-panel">
                <ul class="layui-menu" id="demo-menu">
                    <li lay-options="{id: 100}" class="layui-menu-item-checked">
                        <a class="layui-menu-body-title" href="/HomePages/HomePageView" target="content-frame">首页</a>
                        @*                   <div class="layui-menu-body-title"><a href="javascript:;">首页</a></div> *@
                    </li>
                    <li class="layui-menu-item-divider"></li>
                    <li class="layui-menu-item-group" lay-options="{type: 'group', spread: false}">
                        <div class="layui-menu-body-title">
                            人资系统 <i class="layui-icon layui-icon-down"></i>
                        </div>
                        <ul>
                            <li>
                                <a class="layui-menu-body-title" href="/JobGradeManagement/JobGradeQuery" target="content-frame">职级管理</a>
                            </li>
                            <li><a class="layui-menu-body-title" href="/Talentregistration/TalentregistrationQuery" target="content-frame">人才登记</a></li>
                            <li>
                                <a class="layui-menu-body-title" href="/InterviewMenagement/InterviewMenagementQuery" target="content-frame">面试管理</a>
                            </li>
                            <li><a class="layui-menu-body-title" href="/OnboardingApplication/ApplicationView" target="content-frame">入职申请</a></li>
                            <li><a class="layui-menu-body-title" href="/OnboardingReview/Auditview" target="content-frame">入职审核</a></li>
                        </ul>
                    </li>
                    @* ------------------生产系统----------------- *@
                    <li class="layui-menu-item-group" lay-options="{type: 'group', spread: false}">
                        <div class="layui-menu-body-title">
                            生产系统 <i class="layui-icon layui-icon-down"></i>
                        </div>
                        <ul>
                            <li>
                                <a class="layui-menu-body-title" href="/MaterialType/MaterialTypeIndex" target="content-frame">物料产品分类</a>
                            </li>
                            <li><a class="layui-menu-body-title" href="/Materialproductmanagement/MaterialproductQuery" target="content-frame">物料产品管理</a></li>
                            <li><a class="layui-menu-body-title" href="/Customer/CustomerQuery" target="content-frame">客户管理</a></li>
                            <li><a class="layui-menu-body-title" href="/Supplier/SupplierIndex" target="content-frame">供应商管理</a></li>
                            <li><a class="layui-menu-body-title" href="/Procedure/ProcedureIndex" target="content-frame">工序设置</a></li>
                            <li><a class="layui-menu-body-title" href="/Workmanship/WorkmanshipIndex" target="content-frame">工艺流程</a></li>
                            <li><a class="layui-menu-body-title" href="/Workshop/Index" target="content-frame">车间设置</a></li>
                            <li>
                                <a class="layui-menu-body-title" href="/Production/Interview/Index" target="content-frame">面试管理</a>
                            </li>
                            <li><a class="layui-menu-body-title" href="/Production/Onboard/Index" target="content-frame">入职申请</a></li>
                            <li><a class="layui-menu-body-title" href="/Production/OnboardApproval/Index" target="content-frame">入职审核</a></li>
                            <li><a class="layui-menu-body-title" href="/CustomerOrder/CustomerOrderQuery" target="content-frame">客户订单</a></li>
                            <li><a class="layui-menu-body-title" href="/ProductionWorkOrderMain/GetProduction" target="content-frame">生产工单</a></li>
                            <li><a class="layui-menu-body-title" href="/ProductionScheduling/Index" target="content-frame">生产排产</a></li>
                            <li><a class="layui-menu-body-title" href="/ProductionDispatchMain/GetDispatch" target="content-frame">生产派单</a></li>
                            <li><a class="layui-menu-body-title" href="/Productionpicking/ProductionpickingQuery" target="content-frame">生产领料</a></li>
                            <li><a class="layui-menu-body-title" href="/ProductionReport/ProductionReportView" target="content-frame">生产报工</a></li>
                            <li><a class="layui-menu-body-title" href="/ProductionMaterialReturn/GetProductMaterReturn" target="content-frame">生产退料</a></li>
                            <li><a class="layui-menu-body-title" href="/ProductionWasteOrder/ProductionWasteOrderIndex" target="content-frame">生产废料</a></li>
                            <li><a class="layui-menu-body-title" href="/Equipment/Type/Index" target="content-frame">设备类型设置</a></li>
                            <li><a class="layui-menu-body-title" href="/Deviceledger/DeviceledgerQuery" target="content-frame">设备台账</a></li>
                            <li><a class="layui-menu-body-title" href="/SpotChecks/SpotChecksView" target="content-frame">点检保养项目</a></li>
                            <li><a class="layui-menu-body-title" href="/Maintenance/MaintenanceView" target="content-frame">点检保养计划</a></li>
                            <li><a class="layui-menu-body-title" href="/RepairOrders/ShowRepair" target="content-frame">维修单</a></li>
                            <li><a class="layui-menu-body-title" href="/Tooling/Type/Index" target="content-frame">类型设置</a></li>
                            <li><a class="layui-menu-body-title" href="/Tooling/Archive/Index" target="content-frame">工装夹具台账</a></li>
                            <li><a class="layui-menu-body-title" href="/Quality/Defect/Index" target="content-frame">常见缺陷</a></li>
                            <li><a class="layui-menu-body-title" href="/Quality/InspectionItem/Index" target="content-frame">检测项设置</a></li>
                            <li><a class="layui-menu-body-title" href="/Quality/InspectionTemplate/Index" target="content-frame">检测模板</a></li>
                            <li><a class="layui-menu-body-title" href="/Pendingtasks/PendingtasksQuery" target="content-frame">待检任务</a></li>
                            <li><a class="layui-menu-body-title" href="/IncomingInspection/Index" target="content-frame">来料检验</a></li>
                            <li><a class="layui-menu-body-title" href="/Process/Getproce" target="content-frame">过程检验</a></li>
                            <li><a class="layui-menu-body-title" href="/OutgoingInspection/InspectionView" target="content-frame">出货检验</a></li>
                            <li><a class="layui-menu-body-title" href="/TeamSet/GetTeamSet" target="content-frame">班组设置</a></li>

                            <li><a class="layui-menu-body-title" href="/HolidaysSet/Index" target="content-frame">节假日设置</a></li>
                            <li><a class="layui-menu-body-title" href="/Shiftplanning/ShiftplanningQuery" target="content-frame">排班计划</a></li>

                            <li><a class="layui-menu-body-title" href="/CrewScheduling/Crew" target="content-frame">排班日历</a></li>
                        </ul>
                    </li>
                    @* ------------------仓储管理----------------- *@
                    <li class="layui-menu-item-group" lay-options="{type: 'group', spread: false}">
                        <div class="layui-menu-body-title">
                            仓储管理 <i class="layui-icon layui-icon-down"></i>
                        </div>
                        <ul>

                            <li><a class="layui-menu-body-title" href="/SupplierReturns/Index" target="content-frame">供应商退货</a></li>
                            <li><a class="layui-menu-body-title" href="/Packing/Index" target="content-frame">装箱管理</a></li>
                            <li><a class="layui-menu-body-title" href="/ProcurementwarehousingPage/ProcurementwarehousingQuery" target="content-frame">采购入库</a></li>
                            <li><a class="layui-menu-body-title" href="/Warehousings/InventoryOnHandView" target="content-frame">库存现有量</a></li>
                            <li><a class="layui-menu-body-title" href="/Warehouse/Inbound/Index" target="content-frame">入库管理</a></li>
                            <li><a class="layui-menu-body-title" href="/Warehouse/Outbound/Index" target="content-frame">出库管理</a></li>
                            <li><a class="layui-menu-body-title" href="/Warehouse/Transfer/Index" target="content-frame">库存调拨</a></li>
                            <li><a class="layui-menu-body-title" href="/CodingManagement/CodingManagementQuery" target="content-frame">赋码管理</a></li>
                            <li><a class="layui-menu-body-title" href="/InventoryCounts/InventoryView" target="content-frame">库存盘点</a></li>
                            <li><a class="layui-menu-body-title" href="/Warehousings/SalesReturnsView" target="content-frame">销售退货</a></li>
                            <li><a class="layui-menu-body-title" href="/Warehousings/OutsourcedView" target="content-frame">外协发料</a></li>
                            <li><a class="layui-menu-body-title" href="/Warehouse/Config/Index" target="content-frame">仓库设置</a></li>
                            <li><a class="layui-menu-body-title" href="/Warehouse/Location/Index" target="content-frame">库位管理</a></li>
                        </ul>
                    </li>
                    @* ------------------订单管理----------------- *@
                    <li class="layui-menu-item-group" lay-options="{type: 'group', spread: false}">
                        <div class="layui-menu-body-title">
                            订单管理 <i class="layui-icon layui-icon-down"></i>
                        </div>
                        <ul>
                            <li><a class="layui-menu-body-title" href="/SalesOrder/Index" target="content-frame">销售订单</a></li>
                            <li><a class="layui-menu-body-title" href="/Order/Delivery/Index" target="content-frame">销售送货单</a></li>
                        </ul>
                    </li>
                    @* ------------------数据分析----------------- *@
                    <li class="layui-menu-item-group" lay-options="{type: 'group', spread: false}">
                        <div class="layui-menu-body-title">
                            数据分析 <i class="layui-icon layui-icon-down"></i>
                        </div>
                        <ul>
                            <li><a class="layui-menu-body-title" href="/InventoryData/InventoryDataView" target="content-frame">库存数据</a></li>
                            <li><a class="layui-menu-body-title" href="/IInboundCmparison/InboundCmparison" target="content-frame">物料出入库对比</a></li>
                            <li><a class="layui-menu-body-title" href="/Materialflowdata/MaterialflowdataQuery" target="content-frame">物料流转数据</a></li>
                        </ul>
                    </li>
                    @* ------------------RBAC权限管理----------------- *@
                    <li class="layui-menu-item-group" lay-options="{type: 'group', spread: false}">
                        <div class="layui-menu-body-title">
                            RBAC <i class="layui-icon layui-icon-down"></i>
                        </div>
                        <ul>
                            <li><a class="layui-menu-body-title" href="/User/UserQuery" target="content-frame">用户管理</a></li>
                            <li><a class="layui-menu-body-title" href="/Role/GetRole" target="content-frame">角色管理</a></li>
                            <li><a class="layui-menu-body-title" href="/Permission/Permission" target="content-frame">权限管理</a></li>
                        </ul>
                    </li>

                    <li class="layui-menu-item-divider"></li>


                </ul>
            </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="content-area">
            <!-- 内容主体 - 移除了顶部标题栏，让每个页面显示自己的标题 -->
            <div class="content-main" style="flex: 1;">
                <!-- 默认欢迎页面 -->
                <div class="welcome-page" id="welcome-page" style="display: none;">
                    <div class="icon">🏠</div>
                    <h3>欢迎使用ERP管理系统</h3>
                    <p>请点击左侧菜单开始使用系统功能</p>
                </div>

                <!-- iframe容器，用于加载页面 -->
                <iframe id="content-frame" name="content-frame" src="/HomePages/HomePageView"></iframe>
            </div>
        </div>
    </div>

    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script>
        layui.use(['element', 'layer', 'util'], function(){
          var element = layui.element;
          var layer = layui.layer;
          var util = layui.util;

          // layui 2.5.6版本使用element模块处理菜单
          // 不需要手动渲染，layui会自动处理

          // 手动折叠所有菜单组
          document.querySelectorAll('#demo-menu .layui-menu-item-group').forEach(function(item) {
            item.classList.remove('layui-menu-item-down');
          });

          // 为菜单组标题添加点击事件
          document.querySelectorAll('.layui-menu-item-group > .layui-menu-body-title').forEach(function(title) {
            title.addEventListener('click', function(e) {
              e.preventDefault();
              var parentLi = this.parentElement;
              var icon = this.querySelector('i');

              // 切换展开/折叠状态
              if (parentLi.classList.contains('layui-menu-item-down')) {
                parentLi.classList.remove('layui-menu-item-down');
                if (icon) {
                  icon.className = 'layui-icon layui-icon-down';
                }
              } else {
                parentLi.classList.add('layui-menu-item-down');
                if (icon) {
                  icon.className = 'layui-icon layui-icon-up';
                }
              }
            });
          });

          // 菜单点击事件（layui 2.5.6使用element模块）
          element.on('nav(demo-menu)', function(options){
            console.log(this, options);
            // 显示 - 仅用于演示
            if(layer && util) {
              layer.msg(util.escape(JSON.stringify(options)));
            }
          });

          // 简化的菜单点击处理 - 只处理选中状态，让页面自己显示标题
          document.addEventListener('click', function(e) {
            // 检查点击的是否是菜单项
            var target = e.target;
            if (target.classList.contains('layui-menu-body-title') && 
                target.closest('li:not(.layui-menu-item-group):not(.layui-menu-item-divider)')) {
              
              var menuText = target.textContent.trim();
              console.log('点击菜单项:', menuText);
              
              // 移除所有选中状态
              document.querySelectorAll('.layui-menu .layui-menu-item-checked').forEach(function(selected) {
                selected.classList.remove('layui-menu-item-checked');
              });

              // 添加选中状态
              target.closest('li').classList.add('layui-menu-item-checked');

              // 隐藏欢迎页面，显示iframe
              document.getElementById('welcome-page').style.display = 'none';
              document.getElementById('content-frame').style.display = 'block';

              // 特殊处理首页点击，强制刷新iframe
              if (target.href && target.href.includes('/HomePages/HomePageView')) {
                var iframe = document.getElementById('content-frame');
                console.log('首页点击，强制刷新iframe');
                // 添加时间戳参数，强制刷新
                var timestamp = new Date().getTime();
                iframe.src = target.href + '?t=' + timestamp;
                e.preventDefault(); // 阻止默认行为，使用我们的刷新逻辑
              }
            }
          });

          // 监听iframe加载完成事件，根据当前URL更新菜单选中状态
          document.getElementById('content-frame').addEventListener('load', function() {
            var currentSrc = this.src;
            console.log('iframe加载完成，URL:', currentSrc);
            
            // 短暂延迟后执行，确保页面完全加载
            setTimeout(function() {
              // 移除所有选中状态
              document.querySelectorAll('.layui-menu .layui-menu-item-checked').forEach(function(selected) {
                selected.classList.remove('layui-menu-item-checked');
              });
              
              // 根据当前URL找到对应的菜单项并选中
              var matchedMenu = null;
              var menus = document.querySelectorAll('.layui-menu a[href]');
              
              for (var i = 0; i < menus.length; i++) {
                var menu = menus[i];
                var menuHref = menu.getAttribute('href');
                
                if (currentSrc && menuHref && currentSrc.includes(menuHref)) {
                  matchedMenu = menu;
                  break;
                }
              }
              
              if (matchedMenu) {
                // 选中匹配的菜单项
                matchedMenu.parentElement.classList.add('layui-menu-item-checked');
                var menuText = matchedMenu.textContent.trim();
                console.log('根据URL匹配菜单:', menuText);
              } else {
                console.log('未找到匹配的菜单项，URL:', currentSrc);
              }
            }, 100);

            // 尝试隐藏iframe内部的页面标题（只对同源页面有效）
            try {
              var iframeDoc = this.contentDocument || this.contentWindow.document;
              if (iframeDoc) {
                // 查找并隐藏常见的标题元素
                var titleElements = iframeDoc.querySelectorAll('.layui-card-header, .page-title, h1, h2.title');
                titleElements.forEach(function(element) {
                  if (element.textContent.trim() !== '') {
                    element.style.display = 'none';
                    console.log('隐藏页面内部标题:', element.textContent.trim());
                  }
                });
              }
            } catch (e) {
              // 如果是跨域页面，无法访问，这是正常情况
              console.log('无法访问iframe内容（可能是跨域）');
            }
          });

          // 菜单点击事件处理完成

          // 特别为首页菜单添加直接的点击事件处理，解决响应问题
          setTimeout(function() {
            var homeMenu = document.querySelector('a[href="/HomePages/HomePageView"]');
            if (homeMenu) {
              console.log('为首页菜单添加额外的点击事件');
              homeMenu.addEventListener('click', function(e) {
                console.log('首页菜单直接点击事件触发');
                
                // 移除所有选中状态
                document.querySelectorAll('.layui-menu .layui-menu-item-checked').forEach(function(selected) {
                  selected.classList.remove('layui-menu-item-checked');
                });

                // 选中首页
                this.closest('li').classList.add('layui-menu-item-checked');

                // 强制刷新首页
                var iframe = document.getElementById('content-frame');
                var timestamp = new Date().getTime();
                iframe.src = this.href + '?t=' + timestamp;
                
                console.log('首页iframe已刷新:', iframe.src);
                e.preventDefault();
              }, true); // 使用捕获阶段，确保优先执行
            }
          }, 1000);



    </script>
</body>
</html>